<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
</head>
<style>
 
	.aui-content {
		color: #fff;
	}

	.sx-img {
		margin: 2rem auto;
		text-align: center;
		position: relative;
	}

	.sx-img img {
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
		margin: 0 auto;
		text-align: center;
		box-shadow: 0px 0px 10px #000;
		opacity: 0.5;
		background: #222;
	}

	.sx-img i {
		background: url('../i/sz-img.png') no-repeat center center;
		background-size: cover;
		width: 1.5rem;
		height: 1.5rem;
		position: absolute;
		top: 1.8rem;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		margin: 0 auto;
	}

	.sx-img p {
		color: #fff;
		font-size: 0.65rem;
		padding-top: 1rem;
		opacity: 0.4;
		letter-spacing: 2px;
	}

	.sx-info .aui-card-list-footer {
		background: url('../i/right_s.png') no-repeat right center;
		background-size: 0.3rem;
		margin-right: 0.75rem;
		padding-right: 0.8rem;
		color: #fff;
		font-size: 0.75rem;
		opacity: 0.8;
		margin-bottom: 0.75rem;
	}

	.sx-info .aui-card-list-footer div:first-child {
		width: 35%;
	}

	.sx-info .aui-card-list-footer div:last-child {
		opacity: 0.6;
		width: 60%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: right;
	}

	.btn {
		color: #fff;
		text-align: center;
		padding: 0.75rem;
		margin: 0.75rem;
		font-size: 0.7rem;
		opacity: 0.5;
		padding-top: 0rem;
	}

	#banben {
		font-size: 0.65rem;
		color: #fff;
		text-align: center;
		opacity: 0.3;
		padding-top: 1rem;
	}

	#banben span {
		font-weight: bold;
	}
</style>

<body>
	<script id="sx-list" type="text/x-dot-template">
		<div class="sx-img">
			<img src="{{= _user.img ? _img(_user.img,100) : '../i/touxiang.png'}}" tapmode onclick="_touxiang();" id="img" />
			<i tapmode onclick="_touxiang();"></i>
			<p tapmode onclick="_touxiang();">点击更换头像</p>
		</div>
		<div class="sx-info">
			<div class="aui-card-list-footer" tapmode onclick="nickname()">
				<div>昵称</div>
				<div id="nickname">{{= _user.nickname}}</div>
			</div>
			<div class="aui-card-list-footer" style="background:none;padding-right:0;" tapmode onclick="fuzhi()">
				<div>{{= _getPrefs('_config').config.dtitle}}号</div>
				<div>{{= _user.haoma}}</div>
			</div>
			<div class="aui-card-list-footer" style="background:none;padding-right:0;">
				<div>手机号码</div>
				<div>{{= _user.mobile}}</div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="_url({url:'member_qianming',title:'修改简介'})">
				<div>简介</div>
				<div>{{= _user.qianming}}</div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="age()">
				<div>性别</div>
				<div id="age">{{= _user.age==1?'男':_user.age==2?'女':'不设置'}}</div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="birthday()">
				<div>生日</div>
				<div id="birthday">{{= _user.birthday ? _user.birthday : '未设置' }}</div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="city()">
				<div>地区</div>
				<div id="city">
					{{? _user.province || _user.province || _user.area}} {{= _user.province ? _user.province + ' · ' : ''}} {{= _user.city ? _user.city +' ·' : ''}} {{= _user.area ? _user.area : ''}} {{??}} 点击设置 {{?}}
				</div>
			</div>
			{{? _getPrefs('_config').config.app == 1}} {{??}}
			<div class="aui-card-list-footer" tapmode onclick="_url({url:'member_band',title:'第三方账户绑定'})">
				<div>第三方账户绑定</div>
				<div></div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="_url({url:'member_shiming',title:'实名认证'})">
				<div>实名认证</div>
				<div>{{= shiming[_user.shiming] }}</div>
			</div>
			{{?}}
			<div class="aui-card-list-footer" tapmode onclick="_page('用户协议',1)">
				<div>用户协议</div>
				<div></div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="_page('隐私条款',2)">
				<div>隐私条款</div>
				<div></div>
			</div>
			<div class="aui-card-list-footer" tapmode onclick="cache()">
				<div>缓存</div>
				<div class="clearCache">正在计算</div>
			</div>
		</div>
		<p id="banben">版本<span>{{= api.appVersion}}</span></p>
		<div class="btn" tapmode onclick="out();">退出登录</div>
	</script>
	<div class="aui-content" id="sx-view"></div>
</body>
<script type="text/javascript" src="../j/api.js"></script>

<script type="text/javascript">
	var shiming = ['<span style="color:#FE2C55">未实名</span>', '已认证', '审核中', '<span style="color:#FE2C55">未通过</span>'];
	apiready = function() {
		_user = _getPrefs('_user');
		$api.fixTabBar($api.byId('sx-view'))
		var evalData = doT.template($api.html($api.byId('sx-list')));
		$api.html($api.byId('sx-view'), evalData());
		api.parseTapmode();
		//获取缓存大小
		bytesToSize();
	}

	function bytesToSize() {
		var bytes = api.getCacheSize({
			sync: true
		});
		if (bytes === 0)
			return '0 B';
		var k = 1024,
			sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
			i = Math.floor(Math.log(bytes) / Math.log(k));
		var a= (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
		$api.html($api.dom('.clearCache'), a)
	}

	function cache() {
		api.confirm({
			title: '确认要清除缓存吗？',
			buttons: ['取消', '确定清除']
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index == 2) {
				_loading()
				api.clearCache(function() {
					_loadingCloes()
					$api.html($api.dom('.clearCache'), "0MB")
					_msg('清除完成')
				});
			}
		});

	}
	// 修改用户昵称
	function nickname() {
		api.execScript({
			name: 'member_win',
			frameName: 'member',
			script: 'username_ajax("sz")'
		});
	}

	function nickname_name(a) {
		_msg('修改成功');
		$('#nickname').text(a);
	}

	function img_name(a) {
		_msg('修改成功');
		$('#img').attr('src', _img(a, '100'));
	}
	//  男女
	function age() {
		var b = ['男', '女', '不显示'];
		api.actionSheet({
			title: '选择性别',
			cancelTitle: '取消',
			buttons: b
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index != 4) {
				_loading();
				_ajax('member/age', function(ret, err) {
					if (ret) {
						_msg(ret.ret ? ret.ret : ret.err);
						if (ret.ret) {
							$('#age').text(b[index - 1]);
							_zhen();
						}
					} else {
						_alert(JSON.stringify(err))
					}
					_loadingCloes();
				}, {
					age: index
				})
			}
		});
	}
	// 生日
	function birthday() {
		api.openPicker({
			type: 'date',
			title: '选择出生日时间',
			date: _getPrefs('_user').birthday
		}, function(ret, err) {
			if (ret) {
				var birthday = ret.year + '-' + ret.month + '-' + ret.day;
				console.log(JSON.stringify(birthday));
				_loading();
				_ajax('member/birthday', function(ret, err) {
					console.log(JSON.stringify(ret));
					if (ret) {
						_msg(ret.ret ? ret.ret : ret.err);
						if (ret.ret) {
							$('#birthday').text(ret.time);
							_zhen();
						}
					} else {
						_alert(JSON.stringify(err))
					}
					_loadingCloes();
				}, {
					birthday: birthday
				})

			} else {
				alert(JSON.stringify(err));
			}
		})
	}
	// 城市
	function city() {
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas: _j + 'city.json',
			layout: {
				row: 5,
				col: 3,
				height: 30,
				size: 12,
				sizeActive: 14,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#000',
				color: '#fff',
				colorActive: '#fff',
				colorSelected: '#fff'
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 12,
				w: 90,
				h: 35,
				bg: '#000',
				bgActive: '#000',
				color: '#fff',
				colorActive: '#fff'
			},
			ok: {
				text: '确定',
				size: 12,
				w: 90,
				h: 35,
				bg: '#000',
				bgActive: '#000',
				color: '#fff',
				colorActive: '#fff'
			},
			title: {
				text: '',
				size: 12,
				h: 44,
				bg: '#000',
				color: '#fff'
			},
			fixedOn: api.frameName
		}, function(ret, err) {
			if (ret) {
				if (ret.eventType == 'ok') {
					_loading();
					var province = ret.selectedInfo[0].name;
					var city = ret.selectedInfo[1].name;
					var area = ret.selectedInfo[2].name;
					_ajax('member/city', function(ret, err) {
						console.log(JSON.stringify(ret));
						if (ret) {
							_msg(ret.ret ? ret.ret : ret.err);
							if (ret.ret) {
								$('#city').html(province + ' · ' + city + ' · ' + area);
								_zhen();
							}
						} else {
							_alert(JSON.stringify(err))
						}
						_loadingCloes();
					}, {
						province: province,
						city: city,
						area: area
					})
				}
			} else {
				console.log(JSON.stringify(err));
			}
		})
	}
	// 退出登录
	function out() {
		api.confirm({
			title: '退出确认',
			msg: '退出当前账户，将不能同步收藏，发布评论和分享',
			buttons: ['取消', '确定退出']
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index == 2) {
				_zhen();
				_uot();

				api.closeToWin({
					name: 'root',
					animation: {
						type: 'none',
						duration: 500
					}
				});
			}
		});
	}

	function fuzhi() {
		var clipBoard = api.require('clipBoard');
		clipBoard.set({
			value: _user.haoma
		}, function(ret, err) {
			if (ret) {
				_msg("复制成功")
			}
		});
	}
</script>

</html>
